(function ($, Vue, Iutils) {
    "use strict";
    if (typeof Vue === "undefined") return;

    Vue.component('commonSelectComponent', vueComponent);

    function vueComponent(resolve, reject) {

        var htmlData =
            '<div class="inline-block" style="width: 100%">' +
            '    <i-select ref="select"' +
            '              :placeholder="placeholder"' +
            '              v-model="entityId"' +
            '              filterable' +
            '              :clearable="selectClearable"' +
            '              :label="selectLabel"' +
            '              :label-in-value="selectLabelInValue"' +
            '              @on-change="valueChange"' +
            '              remote' +
            '              :remote-method="selectEntity()"' +
            '              :loading="loading">' +
            '        <i-option v-for="item in entitys" :value="valueToString ? item.key + \'\' : item.value" :key="item.key" :label="item.name">{{item.name}}' +
            '        </i-option>' +
            '    </i-select>' +
            '</div>';

        resolve(vueOpts(htmlData));

        function vueOpts(hData) {

            var _inner = _getInner();
            var _outer = _getOuter();

            var options = {
                template: hData
            };
            options.props = _inner.props();
            options.data = _inner.data;
            options.beforeCreate = _inner.beforeCreate;
            options.init = _inner.init;
            options.watch = _inner.watch();
            options.created = _inner.created;
            options.mounted = _inner.mounted;
            options.computed = _inner.computed();
            options.events = _inner.events();

            options.methods = {
                selectEntity: _outer.selectEntity,
                clearSingleSelect: _outer.clearSingleSelect,
                valueChange: _outer.valueChange
            };
            //-------------------------------------------------------------------//
            // inner 方法
            function _getInner() {
                var o = {};
                $.extend(o, {
                    props: function () {
                        var obj = {
                            model: {required: true, default: null},
                            valueToString: {type: Boolean, default: false},
                            selectLabel: {default: ''},
                            selectClearable: {type: Boolean, default: false},
                            selectLabelInValue: {type: Boolean, default: false},
                            selectOnChange: {type: Function, default: $.noop},
                            selectUrl: {type: String, default: ""},
                            queryParamName: {type: String, default: "name"},
                            placeholder: {type: String, default: "输入名称或标识"}
                        };
                        return obj;
                    },
                    data: function () {
                        var vModel = this;
                        return Iwebapp.$dwWebApp.vmData({
                            entitys: {},
                            entityId: vModel.model || null,
                            loading: false
                        });
                    },
                    beforeCreate: function () {

                    },
                    init: function () {

                    },
                    watch: function () {
                        var obj = {};
                        $.extend(obj, {
                            "model": function (val, oldVal) {
                                var vModel = this;
                                vModel.entityId = val;
                            },
                            "selectLabel": function (val, oldVal) {
                                var vModel = this;
                                vModel.$emit('update:select-label', val);
                                /* setTimeout(function () {
                                 Iutils.VueSet(vModel.$refs["select"], "selectedSingle", val);
                                 }, 300);*/
                            },
                            "entityId": function (val, oldVal) {
                                var vModel = this;
                                // vModel.$emit('update:model', val)
                            }
                        });
                        return obj;
                    },
                    created: function () {
                        if (!this.selectUrl) {
                            throw new Error('select-url is required!');
                        }
                    },
                    mounted: function () {

                    },
                    computed: function () {
                        var obj = {};
                        return obj;
                    }
                    ,
                    events: function () {
                        var obj = {};
                        return obj;
                    }
                });

                return o

            }

            //-------------------------------------------------------------------//
            // outer 方法
            function _getOuter() {
                var o = {};
                $.extend(o, {
                    valueChange: function (value) {
                        var vModel = this;

                        if (vModel.selectLabelInValue) {
                            vModel.$emit('update:model', value.value);
                        } else {
                            vModel.$emit('update:model', value);
                        }

                        if ($.isFunction(vModel.selectOnChange)) {
                            vModel.selectOnChange(value, vModel);
                        }
                    },
                    selectEntity: function () {
                        var vModel = this;
                        vModel.entitys = [
                            {key: 'a', name: 'a'},
                            {key: 'b', name: 'b'},
                            {key: 'c', name: 'c'},
                            {key: 'd', name: 'd'},
                            {key: 'e', name: 'e'},
                            {key: 'f', name: 'f'},
                            {key: 'g', name: 'g'}
                        ];
                        vModel.loading = false;
                        //return select;
                        //function select(query) {
                        //    // if (!query) return false;
                        //    vModel.loading = true;
                        //    var deferred = doSelectEntity(query, vModel.selectUrl, vModel.queryParamName);
                        //    deferred && deferred.done(function (jData) {
                        //        Iutils.Call.Normal(jData, {
                        //            success: function (data) {
                        //                vModel.entitys = Iutils.Attr(data, "entitys") || {};
                        //                vModel.loading = false;
                        //            }
                        //        });
                        //    });
                        //}
                    },
                    clearSingleSelect: function () {
                        var vModel = this;
                        vModel.$refs["select"] && vModel.$refs["select"].clearSingleSelect();
                    }
                });

                //-------------------------------------------------------------------//

                //-------------------------------------------------------------------//
                // ajax

                function doSelectEntity(query, selectUrl, queryParamName) {

                    var aData = {};
                    var paramName = queryParamName || "name";
                    aData[paramName] = query;


                    var url = selectUrl;

                    //return Iutils.Ajax({
                    //    method: "GET",
                    //    url: url,
                    //    data: aData,
                    //    success: function (jData) {
                    //        Iutils.Call.Normal(jData, {
                    //            success: function (data) {
                    //
                    //            }
                    //        })
                    //    }
                    //});

                }

                //-------------------------------------------------------------------//

                return o
            }

            return options;


        }


    }


}(jQuery, Vue, Iutils));
